
<template>
  <div class="hidden">
      <vs-sidebar
        background="rgb(83,101,81)"
        textWhite
        absolute
        hover-expand
        reduce
        v-model="active"
        open
        >
        <template #logo>
          <i-grinning-face-with-tightly-closed-eyes-open-mouth theme="outline" size="24" fill="#ffffff"/>
        </template>
        <vs-sidebar-item id="todo-list">
          <template #icon>
            <i-add-two theme="outline" size="24" fill="#ffffff"/>
          </template>
          待办清单
        </vs-sidebar-item>
        <vs-sidebar-item id="clock-in">
          <template #icon>
            <i-schedule theme="outline" size="24" fill="#ffffff"/>
          </template>
          自律打卡
        </vs-sidebar-item>
        <vs-sidebar-group>
          <template #header>
            <vs-sidebar-item arrow>
              <template #icon>
                <i-id-card-h theme="outline" size="24" fill="#ffffff"/>
              </template>
              个人信息
            </vs-sidebar-item>
          </template>

          <vs-sidebar-item id="username">
            <template #icon>
              <i-winking-face theme="outline" size="24" fill="#ffffff"/>
            </template>
           用户名修改
          </vs-sidebar-item>
          <vs-sidebar-item id="account">
            <template #icon>
              <i-people-safe theme="outline" size="24" fill="#ffffff"/>
            </template>
            账号查看
          </vs-sidebar-item>
          <vs-sidebar-item id="password">
            <template #icon>
              <i-key theme="outline" size="24" fill="#ffffff"/>
            </template>
            密码修改
          </vs-sidebar-item>
          <vs-sidebar-item id="avatar">
            <template #icon>
              <i-avatar theme="outline" size="24" fill="#ffffff"/>
            </template>
            修改头像
          </vs-sidebar-item>
        </vs-sidebar-group>
        <template #footer>
          <vs-row justify="space-between">
            <vs-avatar>
              <img :src="avatarSrc" alt="">
            </vs-avatar>
          </vs-row>
        </template>
      </vs-sidebar>
      <!-- 修改用户名的弹窗 -->
      <vs-dialog v-model="active2" >
        <template #header>
          <h4 class="not-margin">
            您的用户名是： <b>{{$store.state.userinfo.username}}</b>
            <br>
            <br>
            请输入您的新用户名^o^
            <br>
          </h4>
        </template>
        <div class="con-form">
          <vs-input success v-model="new_username" placeholder="New_username">
            <template #icon>
              <i-info theme="outline" size="24" fill="#000000"/>
            </template>
          </vs-input>
        </div>
        <br>
        <template #footer>
          <div class="footer-dialog">
            <vs-button @click="modify_username" color="rgb(137,171,158)">
              更改
            </vs-button>
          </div>
        </template>
      </vs-dialog>
      <!-- 用户名为空的提示弹窗 -->
      <vs-dialog v-model="active6">
        <template #header>
          <h4 class="not-margin">
           提示
          </h4>
        </template>
        <div class="con-content">
          <p>
            您的输入用户名为空！
          </p>
        </div>
        <template #footer>
          <div class="footer-dialog">
            <vs-button @click="active6=false" color="rgb(137,171,158)">
              Ok
            </vs-button>
          </div>
        </template>
      </vs-dialog>
      <!-- 修改密码的弹窗 -->
      <vs-dialog v-model="active3">
        <template #header>
          <h4 class="not-margin">
            请输入您的新密码^o^
            <br>
          </h4>
        </template>
        <div class="con-form">
          <vs-input success type="password" v-model="new_password" placeholder="Password">
            <template #icon>
              <i-key-one theme="outline" size="24" fill="#000000"/>
            </template>
          </vs-input>
          <vs-input success type="password" v-model="new_password2" placeholder="ConfirmPassword">
            <template #icon>
              <i-key-one theme="outline" size="24" fill="#000000"/>
            </template>
          </vs-input>
        </div>
        <br>
        <template #footer>
          <div class="footer-dialog">
            <vs-button @click="modify_password" color="rgb(137,171,158)" >
              更改
            </vs-button>
          </div>
        </template>
      </vs-dialog>
      <!-- 密码长度不符合要求的提示弹窗 -->
      <vs-dialog v-model="active7">
        <template #header>
          <h4 class="not-margin">
           提示
          </h4>
        </template>
        <div class="con-content">
          <p>
            您的密码长度应为6-12位!
          </p>
        </div>
        <template #footer>
          <div class="footer-dialog">
            <vs-button @click="active7=false" color="rgb(137,171,158)">
              Ok
            </vs-button>
          </div>
        </template>
      </vs-dialog>
      <!-- 密码不匹配的提示弹窗 -->
      <vs-dialog v-model="active8">
        <template #header>
          <h4 class="not-margin">
           提示
          </h4>
        </template>
        <div class="con-content">
          <p>
            您再次输入的密码不匹配！
          </p>
        </div>
        <template #footer>
          <div class="footer-dialog">
            <vs-button @click="active8=false" color="rgb(137,171,158)">
              Ok
            </vs-button>
          </div>
        </template>
      </vs-dialog>
      <!-- 修改头像的弹窗 -->
      <vs-dialog v-model="active4">
        <template #header>
          <h4 class="not-margin">
            请选择您的新头像^o^
            <br>
          </h4>
        </template>
        <div class="con-form">
          <div class="container">
            <vs-avatar circle :size="selected1" @click="select1">
              <img src="@/pages/image/icon1.jpg" alt="">
            </vs-avatar>
            <vs-avatar circle :size="selected2" @click="select2">
              <img src="@/pages/image/icon2.jpg" alt="">
            </vs-avatar>
            <vs-avatar circle :size="selected3" @click="select3">
              <img src="@/pages/image/icon3.jpg" alt="">
            </vs-avatar>
            <vs-avatar circle :size="selected4" @click="select4">
              <img src="@/pages/image/icon4.jpg" alt="">
            </vs-avatar>
            <vs-avatar circle :size="selected5" @click="select5">
              <img src="@/pages/image/icon5.jpg" alt="">
            </vs-avatar>
            <vs-avatar circle :size="selected6" @click="select6">
              <img src="@/pages/image/icon6.jpg" alt="" >
            </vs-avatar>
          </div>
        </div>
        <br>
        <template #footer>
          <div class="footer-dialog">
            <vs-button @click="modify_avatar" color="rgb(137,171,158)">
              更改
            </vs-button>
          </div>
        </template>
      </vs-dialog>
      <!-- 未选择新头像的提示 -->
      <vs-dialog v-model="active9">
        <template #header>
          <h4 class="not-margin">
           提示
          </h4>
        </template>
        <div class="con-content">
          <p>
            您未选择新头像！
          </p>
        </div>
        <template #footer>
          <div class="footer-dialog">
            <vs-button @click="active9=false" color="rgb(137,171,158)">
              Ok
            </vs-button>
          </div>
        </template>
      </vs-dialog>
       <!-- 查看账号的弹窗 -->
      <vs-dialog v-model="active5"  >
        <template #header>
          <h4 class="not-margin">
            您的账号是:<b>{{$store.state.userinfo.account}}</b>^o^请牢记!
          </h4>
        </template>
        <div class="con-form">
        </div>
        <template #footer>
          <div class="footer-dialog">
            <vs-button @click="active5=false" color="rgb(137,171,158)">
              确认
            </vs-button>
          </div>
        </template>
      </vs-dialog>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    init_active: String
  },
  data () {
    return {
      active: this.init_active,
      active2: false, // 修改用户名弹窗
      active3: false, // 修改密码弹窗
      active4: false, // 修改头像弹窗
      active5: false, // 查看账号弹窗
      active6: false, // 用户名为空提示
      active7: false, // 密码长度不符合提示
      active8: false, // 密码不匹配提示
      active9:false,//未选择新头像提示
      new_username: '',
      new_password: '',
      new_password2: '',
      new_avatar: this.$store.state.userinfo.avatar,
      init_avatar_src: '',
      selected1: '30',
      selected2: '30',
      selected3: '30',
      selected4: '30',
      selected5: '30',
      selected6: '30'
    }
  },
  methods: {
    select1 () {
      this.new_avatar = 1
      this.selected1 = '50'
      this.selected2 = '30'
      this.selected3 = '30'
      this.selected4 = '30'
      this.selected5 = '30'
      this.selected6 = '30'
    },
    select2 () {
      this.new_avatar = 2
      this.selected2 = '50'
      this.selected1 = '30'
      this.selected3 = '30'
      this.selected4 = '30'
      this.selected5 = '30'
      this.selected6 = '30'
    },
    select3 () {
      this.new_avatar = 3
      this.selected3 = '50'
      this.selected1 = '30'
      this.selected2 = '30'
      this.selected4 = '30'
      this.selected5 = '30'
      this.selected6 = '30'
    },
    select4 () {
      this.new_avatar = 4
      this.selected4 = '50'
      this.selected1 = '30'
      this.selected2 = '30'
      this.selected3 = '30'
      this.selected5 = '30'
      this.selected6 = '30'
    },
    select5 () {
      this.new_avatar = 5
      this.selected5 = '50'
      this.selected1 = '30'
      this.selected2 = '30'
      this.selected3 = '30'
      this.selected4 = '30'
      this.selected6 = '30'
    },
    select6 () {
      this.new_avatar = 6
      this.selected6 = '50'
      this.selected1 = '30'
      this.selected2 = '30'
      this.selected3 = '30'
      this.selected4 = '30'
      this.selected5 = '30'
    },
    modify_username (event) { // 修改用户名
      event.preventDefault()
      if (this.new_username.length === 0) {
        this.new_username = ''
        this.active6 = true
        this.active2 = false
        return
      }
      // 封装向后端传的数据
      const formData = new FormData()
      formData.append('username', this.new_username)
      formData.append('account', this.$store.state.userinfo.account)
      // 向后端请求修改用户名
      axios.put('/api/modifyusername', formData)
        .then(response => {
          this.$store.dispatch('saveUsername', this.new_username)
          console.log(this.$store.state.userinfo)
          this.new_username=""
        })
        .catch(() => {
          // 注册失败，处理错误
          console.error('修改用户名失败')
        })
      this.active2 = false
    },
    modify_password (event) { // 修改密码
      event.preventDefault()
      if (this.new_password !== this.new_password2) { // 密码不匹配
        this.new_password = ''
        this.new_password2 = ''
        this.active3 = false
        this.active8 = true
      } else if (this.new_password.length < 6 || this.new_password.length > 12) {
        this.new_password = ''
        this.new_password2 = ''
        this.active3 = false
        this.active7 = true
      } else { // 密码匹配
        this.active3 = false
        // 封装向后端传的数据
        const formData = new FormData()
        formData.append('password', this.new_password)
        formData.append('account', this.$store.state.userinfo.account)
        // 向后端请求修改密码
        axios.put('/api/modifypassword', formData)
          .then(response => {
            this.$store.dispatch('savePassword', this.new_password)
            console.log(this.$store.state.userinfo)
            this.new_password=""
            this.new_password2=""
          })
          .catch(() => {
            // 注册失败，处理错误
            console.log(error)
          })
      }
    },
    modify_avatar (event) { // 修改头像
      event.preventDefault()
      if(this.new_avatar==this.$store.state.userinfo.avatar){
          this.active9=true
          return
      }
      this.active4 = false
      // 封装向后端传的数据
      const formData = new FormData()
      formData.append('avatar', this.new_avatar)
      formData.append('account', this.$store.state.userinfo.account)
      // 向后端请求修改头像
      axios.put('/api/modifyavatar', formData)
        .then(response => {
          this.$store.dispatch('saveAvatar', this.new_avatar)
          console.log(this.$store.state.userinfo)
          this.new_avatar=""
        })
        .catch(error => {
          // 注册失败，处理错误
          console.log(error)
        })
    }

  },
  computed: {

    avatarSrc () {
      // 根据逻辑动态生成图片的URL
      return require(`@/pages/image/icon${this.$store.state.userinfo.avatar}.jpg`)
    }
  },
  watch: {
    active (newval, oldval) {
      // console.log(this.$store.state.userinfo)
      if (newval === 'todo-list') {
        this.$router.push('mainpage')
      }
      if (newval === 'clock-in') {
        this.$router.push('clockinpage')
      }
      // 修改用户名
      if (newval === 'username') {
        this.active2 = !this.active2
      }

      // 修改密码
      if (newval === 'password') {
        this.active3 = !this.active3
      }
      // 修改头像
      if (newval === 'avatar') {
        this.active4 = !this.active4
      }
      if (newval === 'account') {
        this.active5 = !this.active5
      }
    }
  },
  created () {
    console.log(this.$store.state.userinfo)
  }
}
</script>
  <style lang="stylus">
  getColor(vsColor, alpha = 1)
      unquote("rgba(var(--vs-"+vsColor+"), "+alpha+")")
  getVar(var)
      unquote("var(--vs-"+var+")")
  .not-margin
    margin 0px
    font-weight normal
    padding 10px
  .con-form
    width 100%
    .flex
      display flex
      align-items center
      justify-content space-between
      a
        font-size .8rem
        opacity .7
        &:hover
          opacity 1
    .vs-checkbox-label
      font-size .8rem
    .vs-input-content
      margin 10px 0px
      width calc(100%)
      .vs-input
        width 100%
    .container
      display grid
      grid-template-columns 1fr 1fr 1fr 1fr 1fr 1fr
  .footer-dialog
    display flex
    align-items center
    justify-content center
    flex-direction column
    width calc(100%)
    .new
      margin 0px
      margin-top 20px
      padding: 0px
      font-size .7rem
      a
        color getColor('primary') !important
        margin-left 6px
        &:hover
          text-decoration underline
    .vs-button
      margin 0px
  </style>
